<template>
  <div class="app">
    <div class="Gsum">5G(合计+分承建区)</div>
    <div
      style="width: 400px; height: 400px"
      class="echarts"
      ref="Theside"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    let data = [],
      typs = [],
      sourceData = [
        {
          source: 0,
          source_name: "15g",
          count: 5,
          percent: null,
        },
        {
          source: 1,
          source_name: "",
          count: 6,
          percent: null,
        },
        {
          source: 2,
          source_name: "",
          count: 3,
          percent: null,
        },
      ];

    //- 数据格式化
    sourceData.forEach((o) => {
      if (o.count > 0) {
        data.push(o.count);
        typs.push(o.source_name);
      }
    });

    let count = data.reduce(function (prev, curr) {
        return prev + curr;
      }),
      label = {
        normal: {
          show: true,
        },
      },
      itemStyle = {
        barBorderRadius: 0,
      },
      formatSeries = () => {
        let arr = [];
        typs.forEach((o, i) => {
          arr.push({
            name: o,
            type: "bar",
            stack: "income",
            barWidth: 15,
            label: label,
            labelLine: {
              normal: {
                show: true,
                length: 90,
                length2: 45,
                smooth: true,
              },
            },
            itemStyle: itemStyle,
            data: [
              {
                value: data[i],
                label: {},
              },
            ],
          });
        });

        return arr;
      };

    var myChart = echarts.init(this.$refs.Theside);
    myChart.setOption({
      tooltip: {
        trigger: "item",
      },
      xAxis: [
        {
          type: "value",
          show: false,
          max: count, // 居中显示
        },
      ],
      yAxis: [
        {
          type: "category",
          show: false,
        },
      ],
      legend: {
        show: false,
      },
      color: ["#999", "#1B67A7", "#248BF5"],
      series: formatSeries(),
      grid: {
        top: 143,
        x: 50,
        x2: 90,
        y2: 135,
      },
    });
  },
  // mounted() {
  //   var myChart = echarts.init(this.$refs.Theside);
  //   let myColor = ["#FF0168", "#FFF900", "#56D0E3"];
  //   myChart.setOption({
  //     grid: {
  //       // 直角坐标系内绘图网格
  //       left: "100", //grid 组件离容器左侧的距离,
  //       //left的值可以是80这样具体像素值，
  //       //也可以是'80%'这样相对于容器高度的百分比
  //       top: "250",
  //       right: "20",
  //       bottom: "0",
  //       containLabel: true, //gid区域是否包含坐标轴的刻度标签。为true的时候，
  //       // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
  //       //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
  //     },
  //     xAxis: {
  //       //直角坐标系grid中的x轴,
  //       //一般情况下单个grid组件最多只能放上下两个x轴,
  //       //多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
  //       type: "value", //坐标轴类型,分别有：
  //       //'value'-数值轴；'category'-类目轴;
  //       //'time'-时间轴;'log'-对数轴
  //       splitLine: { show: false }, //坐标轴在 grid 区域中的分隔线
  //       axisLabel: { show: false }, //坐标轴刻度标签
  //       axisTick: { show: false }, //坐标轴刻度
  //       axisLine: { show: false }, //坐标轴轴线
  //     },
  //     yAxis: {
  //       type: "category",
  //       axisTick: { show: false },
  //       axisLine: { show: false },

  //        //类目数据，在类目轴（type: 'category'）中有效。
  //       //如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
  //     },
  //     series: [
  //       //系列列表。每个系列通过 type 决定自己的图表类型
  //       {
  //         name: "%", //系列名称
  //         type: "bar", //柱状、条形图
  //         barWidth: 19, //柱条的宽度,默认自适应
  //         data: [20, 40, 60], //系列中数据内容数组

  //         itemStyle: {
  //           //图形样式
  //           normal: {
  //             //normal 图形在默认状态下的样式;
  //             //emphasis图形在高亮状态下的样式

  //             //此处统一设置4个角的圆角大小;
  //             //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
  //             color: function (params) {
  //               let num = myColor.length; //得到myColor颜色数组的长度
  //               return myColor[params.dataIndex % num]; //返回颜色数组中的一个对应的颜色值
  //             },
  //           },
  //         },
  //         zlevel: 1, //柱状图所有图形的 zlevel 值,
  //         //zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
  //       },
  //       {
  //         name: "进度条背景",
  //         type: "bar",
  //         barGap: "-100%", //不同系列的柱间距离，为百分比。
  //         // 在同一坐标系上，此属性会被多个 'bar' 系列共享。
  //         // 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
  //         //并且是对此坐标系中所有 'bar' 系列生效。
  //         barWidth: 19,
  //         data: [100, 100, 100],
  //         color: "rgba(0,0,0,.2)", //柱条颜色
  //         itemStyle: {
  //           normal: {
  //             barBorderRadius: 10,
  //           },
  //         },
  //       },
  //     ],
  //   });
  // },

  methods: {},
};
</script>

<style lang="less" scoped>
.app {
    position: relative;
    font-weight: 700;
  .Gsum {
    position: absolute;
    top: 189px;
    left: -20px;
    width: 68px;
    height: 200px;
    color: #a5abaf;
    font-size: 12px;
  }
}
</style>
